<template>
<div>
  <div class="header-2">
    <div></div>
    <div @click="topage('home')">首页</div>
    <div class="inputboxAlign">
      <el-input id="el_input" placeholder="请输入内容"></el-input>
      <el-button type="primary" icon="el-icon-search">搜索</el-button>
    </div>
    <div @click="topage('/shoppingcart')" class="cursor_style">
      <i class="el-icon-shopping-cart-full"></i>购物车
    </div>
    <div class="cursor_style" @click="topage('/mine')">
      <i class="el-icon-user-solid"></i>{{ showUserName }}
      <!-- 显示用户名的 -->
    </div>
  </div>

  <!-- 下面是订单列表 -->
  <main>
    <!-- <div v-for="i in orderList" :key="i.id">999999{{ i.name }}</div> -->
    <el-table :data="orderList" style="width: 78%;margin:20px auto;border-radius:10px;" :row-class-name="tableRowClassName">
      <el-table-column prop="id" label="添加序号" width="100">
      </el-table-column>
      <el-table-column prop="productName" label="商品名称" width="180">
      </el-table-column>
      <el-table-column prop="num" label="商品数量" width="200">
      </el-table-column>
      <el-table-column prop="salePrice" label="商品价格"></el-table-column>
      <el-table-column label="商品总价">
        <!--scope.row.num 拿到数据  -->
        <template slot-scope="scope">
          <span>{{scope.row.num*scope.row.salePrice}} 元</span>
        </template>
</el-table-column>
<el-table-column label="操作">
    <template slot-scope="scope">
          <el-button @click.native.prevent="deleteRow(scope.$index, scope.row)" type="danger" size="small">
            移除
          </el-button>
        </template>
</el-table-column>
</el-table>
</main>
<el-card class="box-card">
    <div style="width:20%;height:auto ;float:left;display:inline">小结</div>
    <div style="width:30%;height:auto ;float:left;display:inline">已选商品:{{shangpingeshu}}件</div>
    <div style="width:30%;height:auto ;float:left;display:inline"><span style="font-size:14px"></span></div>
    <div>
        <el-button @click.prevent="jiesuan" type="success" plain style="margin-left: 350px;">结算订单</el-button>
    </div>
</el-card>
</div>
</template>

<script>
    import qs from 'qs'
    export default {
        data() {
            return {
                showUserName: "",
                total: '',
                orderList: [],
                // 商品的个数
                shangpingeshu: ''

            };
        },
        created() {
            // 调用methods的axios
            this.getshopping();
            // loginstateCheck判断登录状态
            this.$store.commit("loginstateCheck");
            if (!this.$store.state.loginstate) {
                this.$router.replace("/login");
                alert("请登录");
            }
        },
        // computed: {
        //   orderList() {
        //     // 从store文件分配过来的orderList
        //     return this.$store.state.orderList;
        //   }
        // },
        mounted() {
            this.showUserName = this.$store.state.showUserName;
            //this.orderList = this.$store.state.orderList;
        },
        methods: {
            jiesuan() {
                this.$message({
                    message: "无法支付",
                    type: "error"
                });

            },
            // axios请求购物车
            async getshopping() {
                try {
                    const res = await this.$http.post('http://47.106.237.228:10003/api/gouwuchechaxun')
                    let tup = res.data.data
                    this.orderList = tup
                    this.shangpingeshu = tup.length
                        //console.log(tup.length)
                } catch (error) {
                    console.log(error)
                }
            },
            // 路由跳转
            topage(toPath) {
                this.$router.push(toPath);
            },
            // 拿到row行
            tableRowClassName({
                row,
                rowIndex
            }) {
                if (rowIndex === 1) {
                    //console.log(row);
                    return "warning-row";
                } else if (rowIndex === 3) {
                    return "success-row";
                }
                return "";
            },
            // 删除
            deleteRow(index, rows) {
                //console.log(rows.id) 
                // 
                this.$message({
                    message: "删除订单成功！",
                    type: "error"
                });
                //
                this.$http({
                        method: "post",
                        url: "http://47.106.237.228:10003/api/gouwuche_shanchu",
                        headers: {
                            "X-Requested-With": "XMLHttpRequest"
                        },
                        data: qs.stringify({
                            id: rows.id,
                        })
                    })
                    .then(res => {
                        //console.log(res.data);
                        // 
                        if (res.data.data === 200) {
                            // 刷新
                            location.reload()
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });

                // 
                //console.log(index)
                // rows.splice(index, 1);
            }
        },
    };
</script>

<style lang="scss" scoped>
    .el-table .warning-row {
        background: oldlace;
    }
    
    .el-table .success-row {
        background: #f0f9eb;
    }
    
    .inputboxAlign {
        text-align: left;
        display: flex;
        justify-content: flex-start;
        max-width: 500px;
    }
    
    .el-button {
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        margin-left: 5px;
    }
    
    .box-card {
        width: 78%;
        margin: 20px auto;
        border-radius: 10px;
    }
    
    .cursor_style {
        cursor: pointer;
    }
    
    .header-2 {
        display: grid;
        grid-template-columns: 165px 600px 1fr repeat(3, 90px) 50px;
        height: 60px;
        justify-content: center;
        align-items: center;
        background-color: black;
        color: white;
        padding-left: 20px;
        div {
            cursor: pointer;
        }
        i {
            margin: 0 10px;
        }
    }
</style>